<template>
  <el-container class="home-container-box">
    <!-- 头部 start -->
    <el-header :class="headerClass">
      <div>
        <img title="自行车租赁系统" src="../assets/pic/logo.jpg" alt="" />
        <span class="sys_title" @click="toWelcome">自行车租赁系统</span>
      </div>
      <el-button class="exit" type="text" @click="exit">退出</el-button>
    </el-header>
    <!-- 头部 end -->
    <el-container>
      <!-- 侧边栏start -->
      <el-aside :class="menuClass" :width="isClose ? '65px' : '200px'">
        <!-- 菜单收缩按钮 -->
        <div :class="toggleClass" @click="stretchOrContraction"></div>
        <!-- 侧边栏菜单start -->
        <el-menu :class="menuClass" text-color="#fff" active-text-color="#1d583a" unique-opened :collapse="isClose" :collapse-transition="false" router :default-active="routerCurrentPath">
          <!-- 一级菜单start -->
          <el-submenu :index="item.id.toString()" v-for="(item, index) in menuList" :key="item.id">
            <template slot="title">
              <i :class="iconObj[index]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :class="menuClass" :index="'/' + val.path" v-for="val in item.children" :key="val.id" @click="savePath('/' + val.path)">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span>{{ val.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 一级菜单start -->
        </el-menu>
        <!-- 侧边栏菜单end -->
        <!-- 侧边栏切换模式start -->
        <div :class="switchClass" v-show="!isClose">
          <i class="el-icon-refresh"></i>
          <span>{{ modelStyle }}</span>
          <el-switch v-model="switchValue" active-color="#5d896c" inactive-color="#d7d4d4" @change="changeColor()"> </el-switch>
        </div>
        <!-- 侧边栏切换模式end -->
      </el-aside>
      <!-- 侧边栏end -->
      <!-- 主体 start -->
      <el-main :class="mainClass">
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
      <!-- 主体 end -->
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 菜单目录
      menuList: [
        {
          id: 1,
          path: 'users',
          authName: '用户管理',
          children: [
            {
              id: 2,
              path: 'users',
              authName: '用户列表'
            }
          ]
        },
        {
          id: 3,
          path: 'rights',
          authName: '权限列表',
          children: [
            {
              id: 88,
              path: 'roles',
              authName: '角色列表'
            }
          ]
        },
        {
          id: 6,
          path: 'back',
          authName: '车辆管理',
          children: [
            {
              id: 7,
              path: 'back',
              authName: '车辆列表'
            }
          ]
        },
        {
          id: 8,
          path: 'orders',
          authName: '订单管理',
          children: [
            {
              id: 9,
              path: 'orders',
              authName: '订单列表'
            }
          ]
        },
        {
          id: 10,
          path: 'reports',
          authName: '数据统计',
          children: [
            {
              id: 11,
              path: 'reports',
              authName: '数据报表'
            }
          ]
        },
        {
          id: 12,
          path: 'my',
          authName: '个人中心',
          children: [
            {
              id: 13,
              path: 'fault',
              authName: '故障信息'
            },
            {
              id: 15,
              path: 'my',
              authName: '个人信息'
            }
          ]
        }
      ],
      // icon集合
      iconObj: ['el-icon-user-solid', 'el-icon-s-goods', 'el-icon-s-tools', 'el-icon-s-order', 'el-icon-s-marketing', 'el-icon-s-custom'],
      // 开关
      switchValue: false,
      modelStyle: '白昼模式',
      // 白天样式
      headerClass: 'header-color-daylight',
      menuClass: 'menu-color-daylight',
      mainClass: 'main-color-daylight',
      switchClass: 'switch menu-color-daylight',
      // 菜单折叠按钮样式
      toggleClass: 'toggle-button el-icon-arrow-down',
      // 菜单是否折叠
      isClose: false,
      // 路由当前路径
      routerCurrentPath: '/users'
    }
  },
  created() {
    // 获取路由地址  设置当前二级菜单高亮
    this.routerCurrentPath = window.sessionStorage.getItem('routerCurrentPath')
    // 获取模式
    this.switchValue = window.sessionStorage.getItem('modelStyle')
    if (this.switchValue === 'true') {
      this.switchValue = true
    } else {
      this.switchValue = false
    }
    // 切换风格
    this.changeColor()
    this.getRole()
  },
  methods: {
    getRole() {
      const role = JSON.parse(window.sessionStorage.getItem('user')).role
      if (role === '超级管理员') {
        this.menuList = [
          {
            id: 1,
            path: 'users',
            authName: '用户管理',
            children: [
              {
                id: 2,
                path: 'users',
                authName: '用户列表'
              }
            ]
          },
          {
            id: 3,
            path: 'rights',
            authName: '权限列表',
            children: [
              {
                id: 88,
                path: 'roles',
                authName: '角色列表'
              }
            ]
          },
          {
            id: 10,
            path: 'reports',
            authName: '数据统计',
            children: [
              {
                id: 11,
                path: 'reports',
                authName: '数据报表'
              }
            ]
          },
          {
            id: 12,
            path: 'my',
            authName: '个人中心',
            children: [
              {
                id: 13,
                path: 'fault',
                authName: '故障信息'
              },
              {
                id: 15,
                path: 'my',
                authName: '个人信息'
              }
            ]
          }
        ]
      } else if (role === '管理员') {
        this.menuList = [
          {
            id: 6,
            path: 'back',
            authName: '车辆管理',
            children: [
              {
                id: 7,
                path: 'back',
                authName: '车辆列表'
              }
            ]
          },
          {
            id: 8,
            path: 'orders',
            authName: '订单管理',
            children: [
              {
                id: 9,
                path: 'orders',
                authName: '订单列表'
              }
            ]
          },
          {
            id: 10,
            path: 'reports',
            authName: '数据统计',
            children: [
              {
                id: 11,
                path: 'reports',
                authName: '数据报表'
              }
            ]
          },
          {
            id: 12,
            path: 'my',
            authName: '个人中心',
            children: [
              {
                id: 13,
                path: 'fault',
                authName: '故障信息'
              },
              {
                id: 15,
                path: 'my',
                authName: '个人信息'
              }
            ]
          }
        ]
      } else {
        this.menuList = [
          {
            id: 6,
            path: 'back',
            authName: '车辆管理',
            children: [
              {
                id: 7,
                path: 'back',
                authName: '车辆列表'
              }
            ]
          },
          {
            id: 8,
            path: 'orders',
            authName: '订单管理',
            children: [
              {
                id: 9,
                path: 'orders',
                authName: '订单列表'
              }
            ]
          },
          {
            id: 10,
            path: 'reports',
            authName: '数据统计',
            children: [
              {
                id: 11,
                path: 'reports',
                authName: '数据报表'
              }
            ]
          },
          {
            id: 12,
            path: 'my',
            authName: '会员中心',
            children: [
              {
                id: 13,
                path: 'fault',
                authName: '故障信息'
              },
              {
                id: 15,
                path: 'my',
                authName: '个人信息'
              }
            ]
          }
        ]
      }
    },
    // 退出登录
    exit() {
      // 清除登录标识的保存
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('user')
      // 跳转至登录界面
      this.$router.push('login')
    },
    // 切换页面模式 true 夜晚模式 false 白天模式
    changeColor() {
      // console.log('开关值', this.switchValue)
      if (this.switchValue) {
        // 风格改为夜晚
        this.headerClass = 'header-color-night'
        this.menuClass = 'menu-color-night'
        this.mainClass = 'main-color-night'
        this.switchClass = 'switch menu-color-night'
        this.modelStyle = '夜晚模式'
      } else {
        // 风格改为白天模式
        this.headerClass = 'header-color-daylight'
        this.menuClass = 'menu-color-daylight'
        this.mainClass = 'main-color-daylight'
        this.switchClass = 'switch menu-color-daylight'
        this.modelStyle = '白昼模式'
      }
      window.sessionStorage.setItem('modelStyle', this.switchValue)
    },
    // 切换展开或者折叠菜单
    stretchOrContraction() {
      this.isClose = !this.isClose
      if (this.isClose) {
        this.toggleClass = 'toggle-button el-icon-arrow-right'
      } else {
        this.toggleClass = 'toggle-button el-icon-arrow-down'
      }
    },
    // 点击菜单，保存路径，设置高亮
    savePath(currentPath) {
      this.routerCurrentPath = currentPath
      window.sessionStorage.setItem('routerCurrentPath', currentPath)
    },
    // 前往首页
    toWelcome() {
      this.$router.push('welcome')
    }
  }
}
</script>

<style lang="less" scoped>
// 主体容器
.home-container-box {
  height: 100%;
}
.exit {
  font-size: 20px;
  color: white;
}
.exit:hover {
  color: #1d583a;
}
// 头部
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0px;
  color: white;
  font-size: 20px;
}
.header-color-daylight {
  background-color: #5d896c;
}

.header-color-night {
  background-color: #494343;
}
.el-header > div {
  display: flex;
  align-items: center;
}
// 标题
.el-header > div > span {
  margin-left: 12px;
}
// logo部分
.el-header div img {
  width: 63px;
  height: 60px;
  border-radius: 40px;
  margin-top: 0px;
  margin-left: 10px;
}
// 侧边栏
.menu-color-daylight {
  background-color: #769c8b;
}
.menu-color-night {
  background-color: #666262;
}
// 折叠或展开按钮
.toggle-button {
  font-size: 15px;
  line-height: 24px;
  // text-align: center;
  // letter-spacing: 0.2em;
  padding-left: 25px;
  margin-top: 7px;
  color: white;
  cursor: pointer;
}
// 菜单样式
.el-menu {
  border-right: none;
}
.el-menu-item:hover {
  background-color: #494343;
}
.el-icon-location {
  font-size: 15px;
  color: white;
}
.switch {
  position: fixed;
  height: 50px;
  bottom: 0px;
  padding: 0px;
  line-height: 50px;
  font-size: 14px;
  color: white;
  z-index: 999;
}
.el-switch {
  margin-left: 48px;
}
.el-submenu > i {
  margin-left: 10px;
}
// 主体
.main-color-daylight {
  background-color: #cbd7cf;
}

.main-color-night {
  background-color: #d3d6df;
  color: #fff;
}
// 系统title
.sys_title {
  cursor: pointer;
}
// 切换模式的图标样式
.el-icon-refresh {
  font-size: 15px;
  margin: 0px 6px 0px 7px;
}
</style>
